<template>
    <div class="container">
		<el-form>


        <el-row>
            <el-col :span="5">
                <div style="width:200px;height:200px; border:1px solid #ccc;">
                    <img  :src="api + ruleForm.plantImg" alt="" style="width:100%;height:100%;">
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <span style="font-size:18px; font-weight:600;">{{ruleForm.jyName}}</span>
                    <span class="mar-l">养殖批次号:{{ruleForm.plantBatch}}</span>
                </div>
                <div style="margin-top:30px;font-size:14px;">
                    <span>养殖规模：{{ruleForm.reapArea}}张</span>
                    <span class="mar-l">养殖方式：{{ruleForm.way}}</span>
                    <span class="mar-l">养殖时间：{{ruleForm.plantTime}}</span>
                </div>
                <div class="con">
                    <div style="margin-top:10px;"><span>养殖:{{this.iday}}天</span><span style="position:absolute;left:200px;">负责人：{{ruleForm.reapUserName}}</span></div>
                    <!-- <div style="margin-top:20px;"><span>种苗数量：{{number}}{{ruleForm.units}}</span></div> -->
                </div>
            </el-col>
       </el-row>
       <el-row style="margin-top:30px;">
		   <el-col :span="10">
			   <el-form-item label="采收方式:">
				   {{ruleForm.reapWay}}
			   </el-form-item>
			   <el-form-item label="采收批号:">
			   		{{ruleForm.batch}}
			   </el-form-item>
			   <el-form-item label="开始时间:">
				   {{ruleForm.beginTime}}
			   </el-form-item>
		   </el-col>
		   <el-col :span="12">
			   <el-form-item label="采收规模:">
				   {{ruleForm.reapArea}}张
			   </el-form-item>
			   <el-form-item label="负责人:">
					{{ruleForm.reapUserName}}
			   </el-form-item>
			   <el-form-item label="结束时间:">
				   {{ruleForm.endTime}}
			   </el-form-item>
		   </el-col>
           <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="第一年" name="第一年" style="background:#f5f5f5;padding:30px;"> -->

                    <div class="addtend" v-for="(item,index) in ruleForm.list" :key="index" style="background:#f5f5f5;padding:5px; border:1px solid #33322f;">
                       <!-- {{item.name}} -->
					   <el-form-item label="产出物名称">
						   {{item.reapName}}
					   </el-form-item>
					   <el-form-item label="采收部位">
						   {{item.reapPart}} <span style="margin-left:30px;" ><el-button type="primary" style="float: right;">{{item.reapNumber}}{{item.units}}</el-button></span>
					   </el-form-item>
					   <el-form-item>
							  <img  :src="api + item.reapImg" alt="" style="width:200px;height:68px;object-fit: cover">
					   </el-form-item>
                    </div>

                <!-- </el-tab-pane> -->
               <!-- <el-tab-pane label="第二年" name="第二年" style="background:#f5f5f5;"></el-tab-pane>

            </el-tabs> -->
        </el-row>
        <!-- 除了这个用工都不是我写的 2024.5.21 Sameki -->
<!--      产品说暂时不要了 2024.6.3 sameki      -->
<!--        <h3 style='margin: 20px 0'>用工记录</h3>-->
<!--        <el-row>-->
<!--            <el-col style='padding: 10px 0'>-->
<!--                <el-button class='theme-button' @click='download' style='float: right'>导出</el-button>-->
<!--                <el-upload-->
<!--                    class="upload-import"-->
<!--                    ref="upload"-->
<!--                    action=""-->
<!--                    :on-change="importExcel"-->
<!--                    accept=".xlsx,.xls"-->
<!--                    :show-file-list='false'-->
<!--                    :auto-upload="false">-->
<!--                    <el-button class='theme-button' slot="trigger" size="small">导入</el-button>-->
<!--                </el-upload>-->
<!--                <el-button class='theme-button' style='float: right;margin-right: 10px' @click='downloadTemplate'>下载导入模板</el-button>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--        <el-table border stripe :data="workerTableData">-->
<!--            <el-table-column align='center' prop="name" label="姓名">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-input v-model="scope.row.name" placeholder="请输入内容" @blur='saveWorkTable(scope.row)'></el-input>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column align='center' prop="tache" label="用工类型"></el-table-column>-->
<!--            <el-table-column align='center' prop="startDate" label="开始时间"></el-table-column>-->
<!--            <el-table-column align='center' prop="endDate" label="结束时间"></el-table-column>-->
<!--            <el-table-column align='center' prop="workHours" label="工时">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-input v-model="scope.row.workHours" placeholder="请输入内容" @blur='saveWorkTable(scope.row)'></el-input>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column align='center' prop="money" label="用工金额(元)">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-input v-model="scope.row.money" placeholder="请输入内容" @blur='saveWorkTable(scope.row)'>-->
<!--                        <template slot="suffix">-->
<!--                            <span style='position: absolute;top: 4px;right: 5px'>元</span>-->
<!--                        </template>-->
<!--                    </el-input>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column align='center'  label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button type="text" @click="handleDel(scope.row)">删除</el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--        </el-table>-->
<!--        <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>-->
        <!-- 除了这个用工都不是我写的 2024.5.21 Sameki -->


		<el-form-item class="footerFixed" label-width="0px">
		    <div class='fixed'>
                <el-button class='theme-button' @click="backPage" >返回</el-button>
            </div>
		</el-form-item>
		</el-form>
    </div>
</template>

<script>
import { getPlantLaborList, reap_findById, updatePlantLabor, updateRecoveryLabor } from '@/request/api';
import axios from 'axios';
    export default {
        data(){
            return{
                iday:'',
                api:this.$store.state.plantImg,
                id:'',
                activeName:'第一年',

                ruleForm:'',
				number:0,
                formData:{
                    file:'',
                },
                workerTableData:[],
                pageSize:10,
                currentPage:1,
                total:0,
            }
        },
        mounted(){
            this.id = this.$route.query.id
            this.init()
            // console.log(this.id)

        },
        methods:{
            // 导出
            async download() {
                this.downloadFile(`/labor/exportLaborData?batch=${this.ruleForm.batch}`,'用工记录')
            },
            async importExcel(file){
                let formData = new FormData()
                formData.append('file',file.raw)
                formData.append('type','reap')
                formData.append('batch',this.ruleForm.batch)
                const res = await updateRecoveryLabor(formData)
                if(res.code == 200){
                    this.$notify({
                        title: '操作成功',
                        message: '导入成功',
                        type: 'success'
                    })
                    this.getWorkDetail()
                }else{
                    this.$notify({
                        title: '操作失败',
                        message: res.msg,
                        type: 'error'
                    })
                    this.getWorkDetail()
                }
            },
            //下载xlsx文件
            downloadFile(url,fileName){
                //由于之前的前端没有封装导入模板接口，所以只能用axios
                axios.get(localStorage.getItem('requestUrl')+url,{responseType:'arraybuffer'}).then(res=>{
                    const blob = new Blob([res.data],{type:'application/vnd.ms-excel'})
                    const url = window.URL.createObjectURL(blob)
                    const link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download',`${fileName}.xlsx`)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                    window.URL.revokeObjectURL(url)
                    this.$notify({
                        title: '操作成功',
                        message: '下载成功',
                        type: 'success'
                    })
                })
            },
            //下载导入模板
            //type (1=农事用工, 2=养殖用工, 3=加工用工, 4=采收用工)
            async downloadTemplate() {
                this.downloadFile('labor/exportLaborTemplate?type=4','采收导入模板')
            },
            handleSizeChange(v){
                this.pageSize = v
                this.getWorkDetail()
            },
            handleCurrentChange(val) {
                this.pageSize = val
                this.getWorkDetail()
            },

            async saveWorkTable(params){
                console.log(params);
                const res = await updatePlantLabor(params)
                if(res.code == 200){
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                }
            },
            //查询用工记录数据
            async getWorkDetail(){
                let params = {
                    page: this.currentPage,
                    PageSize: this.pageSize,
                    batch:this.ruleForm.batch
                }
                console.log(params);
                const res = await getPlantLaborList(params)
                if(res.code == 200){
                    this.workerTableData = res.data.content
                    this.workerTableData.forEach((item)=>{
                        item.tache = '采收'
                    })
                    this.total = res.data.totalElements
                    console.log(this.workerTableData,'表格数据');
                }
            },




			backPage(){
				this.$router.go(-1)
			},
            init(){
                reap_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
                    var date2 = this.ruleForm.beginTime.replace(/\//g,"-")
					var date1 = this.ruleForm.endTime.replace(/\//g,"-")
                    var date1 = Date.parse(date1)
                    var date2 = Date.parse(date2)

                    var day =  date1 - date2
                    var day = Math.abs(day)
                    this.iday = Math.floor(day/(24*3600*1000))
					for(var i=0;i<res.data.list.length;i++){
						this.number = this.number + Number(this.ruleForm.list[i].reapNumber)
					}
					// console.log(this.number)
                    this.getWorkDetail()
                })
            },
            handleClick(){

            },
            goadded(){
                this.$router.push({
                    path:'/plant/tending/addtending'
                })
            }
        }
    }
</script>

<style lang='less' scoped>
@import "@/assets/css/common.less";
.el-pagination{
    margin-top: 10px;
    text-align: right;
}
    .mar-l{
        margin-left:30px;
    }
    .con{
        width:400px;
        /* height:100px; */
        background:#E8F1FF;
        border-radius:10px;
        margin-top:25px;
        padding:15px;
        font-size:14px;
        position:relative;
    }
    .addtend{
        display:inline-block;
        width: 200px;
        margin-left:20px;
        /* margin:20px; */
        height:200px;
        /* line-height:200px;
        text-align: center; */
        background:#fff;
    }

</style>
